在大型專案中，我們會需要注入大量的元件，每次都要把所有的元件載入有時相對耗效能，這時候就可以使用非同步組件在需要時再載入需要的元件。

定義非同步元件

如果是非同步組件的話就會是下面三種不同的傳入參數:
工廠函數、Promise以及物件。

工廠函數

在工廠函數中，有兩個參數: resolve 函數跟 reject 函數。
我們必須使用非同步的方式取回元件，如果成功則叫用 resolve 並帶入組件，告訴工廠函數已經取得元件，而 reject 則是元件取得失敗時進行呼叫。

Vue.component('async-component-factory-function', (resolve, reject) => {
  setTimeout(() => {
    resolve({
      template: '<div>Async Component</div>'
    });
  }, 1000);
});

透過工廠函數可以得知是否呼叫成功，呼叫失敗的話則會回傳錯誤需訊息:

Vue.component('async-component-base', (resolve, reject) => {
  setTimeout(() => {
    reject('Error!!!');
  }, 1000);
});

不過，我們也可以使用Promise進行改寫，因為promise的第一個參數即為工廠函數。

Vue.component('async-component-promise', () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({
      template: '<div>Async Component</div>'
    });
    reject('Error!!!');
  }, 1000);
}));

另外，異步元件也支援了其他物件來讓我們客製化異步元件:
物件，它可以在物件中定義三個元件及兩個數值:
component : 非同步元件。
loading : 在非同步元件載入前渲染於頁面的元件。
error : 載入錯誤時的元件。
delay : 在 delay 多久後顯示等待元件。
timeout : 超過 timeout 時間後渲染錯元件。

const LoadingComponent = {
  template: '<div>Loading...</div>'
};
const ErrorComponent = {
  template: '<div>Error!!!</div>'
};
Vue.component('async-component', () => ({
  component: new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({
          template: '<div>Async Component</div>'
        });
          reject('Error!!!');
    }, 1000);
  }),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 300,
  timeout: 5000
}));

這些參數的意思是:
在 1 秒載入組件。
0.3 秒後顯示等待元件 LoadingComponent 。
如果超過 5 秒，顯示錯誤元件 ErrorComponent 。

原始碼: https://codepen.io/adjwcmzg/pen/OJgrrqw

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#